기존 서비스 국제화(i18n) 작업 쉽게 덜어내기: t 함수 자동 래핑 스크립트 만들기

인프랩 랠릿의 국제화 작업 개요

인프랩의 랠릿 셀 프론트엔드 개발자 고슈, 도니, 루시는 2024년 초 인프런의 글로벌 서비스 출시 계획을 듣고, 이에 따른 국제화(I18N) 작업에 착수하게 되었습니다. 이번 작업은 레거시 코드 정리부터 국제화 적용까지 포함되며, 기존 서비스를 다국어 지원 서비스로 전환하는 과정에서 효율적인 i18n 적용 방법을 모색하는 데 중점을 두었습니다.

Next.js와 next-i18next를 활용한 다국어 처리

랠릿 셀은 Next.js 기반 프로젝트에서 다국어 지원을 구현하기 위해 next-i18next 라이브러리를 채택하였습니다. 이 라이브러리는 다음과 같은 주요 특징을 제공합니다:

useTranslation 훅을 통해 번역 함수(t) 제공
JSON 파일로 언어 자원 관리
서버사이드 렌더링 지원
동적 번역 및 네임스페이스 지원

이를 통해 기존 서비스에 국제화를 효율적으로 적용할 수 있었습니다.

언어 자원의 키 정의 방식

기존 인프런 셀의 React 마이그레이션 진행 중, 랠릿 셀은 이미 React로 전환된 코드에 i18n을 적용하는 첫 작업을 맡았습니다. 이 과정에서 언어 자원의 키를 정의하는 방식에 대한 컨벤션을 설정해야 했습니다. 세 가지 방식이 논의되었으며, 각각의 장단점이 분석되었습니다.

1. 한글 키 방식

한국어 텍스트를 그대로 키로 사용하는 방식입니다.

장점:

키 정의 과정 생략 가능
빠른 다국어 전환
직관적인 코드 가독성

단점:

텍스트 중복 가능성
원본 텍스트 변경 시 키 수정 필요
언어별 1:1 매칭 어려움

2. 역할군 기반 한글 키 방식

{페이지 | 도메인}.{섹션}.{역할}.{서브} 형태로 구조화된 한글 키를 사용하는 방식입니다.

장점:

체계적인 키 구조
명확한 네이밍 규칙

단점:

수동 키 정의 필요
컨벤션 학습 필요
UI 변경 시 키 수정 필요

3. 역할군 기반 영어 키 방식

{page|domain}.{section}.{role}.{sub} 형태로 구조화된 영문 키를 사용하는 방식입니다.

장점:

체계적인 키 구조
텍스트 변경에 독립적인 키 관리
표준화된 네이밍

단점:

수동 키 정의 필요
컨벤션 학습 필요
UI 변경 시 키 수정 필요
비개발 직군의 낮은 직관성

최종 결정: 한글 키 방식 채택

랠릿 셀은 개발 및 디자인 팀의 빠른 작업 속도 확보와 직관적인 키 관리로 인한 생산성 향상을 고려하여 한글 키 방식을 채택하기로 결정했습니다. 이는 프로젝트의 시간 제약 상황을 반영한 결과로, 팀 전체의 효율성을 우선시한 선택이었습니다.

자동화 스크립트 개발

랠릿 셀은 i18n 적용 과정을 더욱 효율적으로 진행하기 위해 T 함수 자동 래핑 스크립트를 개발하였습니다. 이를 통해 번역이 필요한 문자열을 자동으로 감지하고, T 함수로 감싸는 작업을 자동화하여 개발 속도를 높였습니다.

함께 읽으면 좋은 참고 자료

국제화와 지역화에 대한 이해
Next.js 공식 문서
i18next 라이브러리 문서

[ 출처] 기존 서비스 국제화(i18n) 작업 쉽게 덜어내기: t 함수 자동 래핑 스크립트 만들기